<template>
  <div class="grade-info">
    <el-card>
      <template #header>
        <div class="header">
          <h3>成绩录入管理</h3>
          <div class="header-right">
            <el-button type="success" @click="handelAdd">添加成绩</el-button>
          </div>
        </div>
      </template>
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </el-card>

    <!-- 添加成绩对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="添加成绩"
      width="50%"
    >
      <el-form :model="gradeForm" :rules="rules" ref="gradeFormRef" label-width="100px">
        <el-form-item label="学生编号" prop="studentNum">
          <el-input v-model="gradeForm.studentNum" />
        </el-form-item>
        <el-form-item label="班级" prop="className">
          <el-input v-model="gradeForm.className" />
        </el-form-item>
        <el-form-item label="课程名称" prop="courseName">
          <el-input v-model="gradeForm.courseName" />
        </el-form-item>
        <el-form-item label="分数" prop="score">
          <el-input-number v-model="gradeForm.score" :min="0" :max="100" />
        </el-form-item>
        <el-form-item label="学期" prop="semester">
          <el-input v-model="gradeForm.semester" />
        </el-form-item>
        <el-form-item label="考试类型" prop="examType">
          <el-select v-model="gradeForm.examType">
            <el-option label="期中" value="期中" />
            <el-option label="期末" value="期末" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import myAxios from '../../../plugins/myAxios'

const dialogVisible = ref(false)
const gradeFormRef = ref()

const gradeForm = reactive({
  studentNum: '',
  className: '',
  courseName: '',
  score: 0,
  semester: '',
  examType: '期末'
})

const rules = {
  studentNum: [{ required: true, message: '请输入学生ID', trigger: 'blur' }],
  className: [{ required: true, message: '请输入班级', trigger: 'blur' }],
  courseName: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
  score: [{ required: true, message: '请输入分数', trigger: 'blur' }],
  semester: [{ required: true, message: '请输入学期', trigger: 'blur' }],
  examType: [{ required: true, message: '请选择考试类型', trigger: 'change' }]
}

const handelAdd = () => {
  dialogVisible.value = true
}

const submitForm = async () => {
  if (!gradeFormRef.value) return
  
  await gradeFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        await myAxios.post('/admin/grade/add', gradeForm)
        ElMessage.success('添加成功')
        dialogVisible.value = false
        // 重置表单
        gradeFormRef.value.resetFields()
      } catch (error) {
        ElMessage.error('添加失败：' + error)
      }
    }
  })
}
</script>

<style scoped>
.grade-info {
  padding: 20px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-right {
  display: flex;
  gap: 10px;
}
</style> 